import Vue from 'vue';
import './drag'

Vue.directive('dialogdrag', {
    inserted(el, binding) {
        //可拖拽区域binding.value.target
        //拖拽时移动的区域binding.value.container
        //拖拽的边界binding.value.target
        $(binding.value.container).Tdrag({
            scope: binding.value.border,
            handle: binding.value.target
        });
        $(binding.value.container).divResize(function () {
            var css = {
                'left': 'initial',
                'right': 'initial',
                'bottom': 'initial',
                'top': '100px'
            };
            $(binding.value.container).css(css);
        },null);
    }
})

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
    bind(el, binding, vnode, oldVnode) {
        const dragDom = $(binding.value.container).parents('.el-dialog');

        el.onmousedown = (e) => {

            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - el.offsetLeft;

            document.onmousemove = function (e) {
                e.preventDefault(); // 移动时禁用默认事件

                // 通过事件委托，计算移动的距离 
                const l = e.clientX - disX;
                dragDom.style.width = `${l}px`;
            };

            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    }
})
